<script setup lang="ts">
import { computed } from 'vue'

defineProps<{
  todos: Array<{
    id: number
    text: string
    completed: boolean
  }>
}>()

// 计算剩余未完成的待办事项数量
const remainingCount = computed(() => {
  return props.todos.filter(todo => !todo.completed).length
})

// 计算是否所有待办事项都已完成
const allCompleted = computed(() => {
  return props.todos.length > 0 && props.todos.every(todo => todo.completed)
})

const emit = defineEmits(['clearCompleted'])
</script>

<template>
  <footer class="flex justify-between items-center p-4 border-t border-gray-100 bg-gray-50 rounded-b-lg">
    <span class="text-sm text-gray-500">
      {{ remainingCount }} 个待完成任务
    </span>
    
    <button
      v-if="allCompleted"
      @click="$emit('clearCompleted')"
      class="text-xs text-gray-500 hover:text-red-500 transition-colors"
    >
      清除已完成任务
    </button>
  </footer>
</template>

<style scoped>
footer {
  font-family: 'Inter', sans-serif;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #eee;
  color: #666;
  font-size: 14px;
  background-color:rgb(226, 10, 10);
}
</style>  